<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM添加修改删除练习</title>
</head>
<style>
    tbody {
        text-align: center;
    }

    .newForm {
        border: 1px solid #ccc;
    }
</style>
<body>
<table class="table" border="1" width="600" align="center">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tom</td>
        <td>123@qq.com</td>
        <td>5000</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>Jim</td>
        <td>456@163.com</td>
        <td>10000</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>Jason</td>
        <td>789@gmail.com</td>
        <td>15000</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    </tbody>

    <form action="" method="get" class="newForm">
        <fieldset>
            <h3>添加新员工</h3>
            <p>name:<input type="text" name="name"></p>
            <p>email:<input type="text" name="email"></p>
            <p>salary:<input type="text" name="salary"></p>
            <p><input type="submit" name="submit"></p>
        </fieldset>
    </form>
</table>
<script>
    /*
    *生成新的员工的信息，然后添加到表格里
    * */
    //1.点击a链接，删除表a链接所在的表格的一行
    let dels = document.querySelectorAll("a");
    for (let i = 0; i < dels.length; i++) {
        dels[i].onclick = function () {
            let removeTr = this.parentNode.parentNode;
            let td = this.parentNode;
            //删除子类的节点
            removeTr.removeChild(td);
            //删除自身的节点
            //removeTr.remove();
        }
    }
</script>
</body>
</html>